/** @jsxImportSource @emotion/react */
import { jsx, css } from "@emotion/react";
import { storiesOf } from "@storybook/react";
import {useContext, useState} from "react";
import * as React from "react";
import { Button } from "../Button";
import { AlertDialog } from "../AlertDialog";
import {Carousel} from "../Carousel";
import { faker } from '@faker-js/faker/locale/zh_CN';
import {TabPanel} from "../Tabs";
import {TwoHalfRightPanel, VerticalMenu} from "../TwoHalfRightPanel";
import {IconButton} from "../IconButton";
import {IconArrowLeft} from "../Icons";
import {DdMenuItem} from "../DropdownMenu";
import {useTheme} from "../Theme/Providers";
import {PanelEnlargeCtx} from "../MainMenuBar";
import {PanInfo} from "framer-motion";
import {CarouselPage} from "../CarouselPage";
import {UnitList} from "./TwoHalfCarousel.stories";


const colors = ["red", "green"];

function Example() {
  const [show, setShow] = useState(false);

  return (
      <div style={{ width: 600, height: 400 }}>
          <Carousel>
              {colors.map((item, i) => (
                  <div
                      key={i}
                      style={{
                          width: "100%",
                          height: "100%",
                          backgroundColor: colors[i],
                      }}
                  ></div>
              ))}
          </Carousel>
      </div>
  );
}

export const ThemeExamples = storiesOf("Carousel", module).add(
  "Basic usage",
  () => <Example />
).add(
    "图片轮播",
    () => <Example2 />
).add(
    "TwoHalf",
    () => <ExampleT />
).add(
    "Frame-Motion CarouselPage",
    () => <CarouselUnitList />
);


interface UnitMainProps {
    children?: React.ReactNode;
}
//内部嵌入 第二层的 一个轮播台
const CarouselUnitList: React.FunctionComponent<UnitMainProps> = props => {
    const [activeTab, setActiveTab] = React.useState(0);
    const { enlarge, setEnlarge,setActivecas,getActivecas} =useContext(PanelEnlargeCtx);
    function onChildCannotDrag(e: Event, dragProps: PanInfo) {
        const { offset } = dragProps
        if (offset.x > 0) {
            setActivecas(getActivecas!()===1? 0 : 1);
        } else if (offset.x < 0) {
            setActivecas(getActivecas!()===1? 0 : 1);
        }
    }
    return (
        <CarouselPage  value={activeTab} onRequestChange={setActiveTab}
                       onNestDragEnd={onChildCannotDrag}
        >
            <TabPanel id="company"
                      css={{
                          // height: '100%',
                      }}
            >
                <UnitList add={'公司'}/>
            </TabPanel>
            <TabPanel id="person"
                      css={{
                          // height: '100%',
                      }}
            >
                <UnitList add={'个人'}/>
            </TabPanel>
        </CarouselPage>
    );
}


const USERS = [];
Array.from({ length: 5 }).forEach(() => {
    faker.seed();
    USERS.push(faker.image.cats());
});

function Example2() {
    const [show, setShow] = useState(false);

    return (
        <div style={{ width: 600, height: 400, margin: "0 auto" }}>
            <Carousel>
                {USERS.map((item, i) => (
                    <img
                        draggable="false"
                        src={item}
                        key={i}
                        width="100%"
                        alt=""
                    />
                ))}
            </Carousel>
        </div>
    );
}


function ExampleT() {
    const theme = useTheme();
    const [show, setShow] = useState(false);

    const panel1=(<TabPanel id="ListSummary"
         >
        <div  style={ {
            display: 'flex',
            alignItems: 'center',
        }  }>
            <h3>Floating UI Dropdo wn Menu三事大夫UI Dropdown Menu三事大安达完了了翁另外市543多夫</h3>
        </div>
        <h3>Floating UI Dropdo wn Menu三达完了了翁另外市543多夫</h3>
    </TabPanel>);

    const rightPanel=(
        <TwoHalfRightPanel
            title={  `关联的检验信息 wn Menu三事大安达`
            }
            back={
                <IconButton  noBind  icon={<IconArrowLeft />}
                             variant="ghost"
                             label="后退"
                             size="md"
                             css={{
                                 marginRight: theme.spaces.sm,
                                 [theme.mediaQueries.md]: {
                                     display: "none"
                                 }
                             }}
                />
            }
            menu={
                <VerticalMenu>
                    <DdMenuItem label="奇怪了"/>
                </VerticalMenu>
            }
        >

            <h3>ARIA Authoring右边的页面 Practices Guide</h3>

        </TwoHalfRightPanel>
    );

    const panel2=(
        <TabPanel id="DetailsEditor"
        >
            { rightPanel }
        </TabPanel>
    );

    const panels = [panel1, panel2];


    return (
        <div style={{ width: 400, height: 500 }}>
            <Carousel autoPlay={false}
                      renderArrowLeft={()=>null}  renderArrowRight={()=>null}  renderDots={()=>null}
            >
                {panel1}
                {panel2}
            </Carousel>
        </div>
    );
}
